<template>
  <div style="background-color: #2c3e50;height: 100%;width: 100%;">
    <div style="height: 220px;"></div>
    <div id="login_panel">
      <div class="title">登录</div>
      <div style="height: 30px;"></div>
      <div style="text-align: center;font-size: 18px;vertical-align: center;height: 35px;">
        <div style="float: left;left: 65px;position: relative;width: 80px;text-align: left;">用户名</div>
        <div class="input_area">
          <input type="text" placeholder="请输入用户名" v-model="username">
        </div>
      </div>
      <div style="height: 15px;"></div>
      <div style="text-align: center;font-size: 18px;vertical-align: center;height: 35px;">
        <div style="float: left;left: 65px;position: relative;width: 80px;text-align: left;">密码</div>
        <div class="input_area">
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
      </div>
      <div style="height: 25px;"></div>
      <div class="login_button" v-on:click="login">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    }
  },
  mounted() {
    this.initLogin()
  },
  methods: {
    initLogin: function () {
      let loginInfo = localStorage.getItem('login');
      if (!loginInfo) {
        return
      }
      loginInfo = JSON.parse(loginInfo);
      if (loginInfo.username) {
        this.username = loginInfo.username
      }
      if (loginInfo.password) {
        this.password = loginInfo.password
      }else {
        this.password = '123456'
      }
    },
    login: function () {
      const data = {content: {username: this.username, password: this.password}};
      if (this.username.length < 1 || this.password.length < 1) {
        this.$message('请输入用户和密码');
        return
      }
      this.$axios({url:"/ems/client/login", data: data}).then((content) => {
        content['username'] = this.username
        content['password'] = this.password
        localStorage.setItem('login', JSON.stringify(content))
        this.$router.push({path: '/index'})
      })
    }
  }
}
</script>
<style scoped>
#login_panel {
  background-color: rgba(255, 255, 255, 0.7);height: 300px;width: 400px;border-radius: 10px;color: black;position: relative;float: left;left: 40%;
}
#login_panel .title{
  text-align: center;font-size: 25px;font-weight:bold;vertical-align: center;padding-top: 40px;
}
#login_panel .input_area {
  position: relative;float: left;left:80px;width: 160px;background-color: white;height: 31px;border: 2px solid rgba(186, 186, 186);border-radius: 5px;
}
#login_panel .login_button {
  float: left;
  left: 65px;position: relative;
  height: 35px;
  background-color: green;width: 260px;
  text-align: center;
  line-height: 35px;
  color: white;
  cursor: pointer;
  border-radius: 3px;
}
#login_panel .input_area input {
  width: 150px;height: 27px;border: 0;
}
</style>
